
<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-input v-model="formInline.condition" placeholder="请输入课程名称"   style="width: 180px"></el-input>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="checkBy">查询</el-button>
        <el-button type="primary" @click="AddCourseVisible = true"  >新增课程</el-button>
      </el-form-item>
    </el-form>
    </div>

  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        label="序号"
        >
      </el-table-column>
      <el-table-column
        prop="courseId"
        label="课程编号"
        >
      </el-table-column>
      <el-table-column
        prop="major.majorName"
        label="专业"
        >
      </el-table-column>
      <el-table-column
        prop="courseName"
        label="课程名称"
        >
      </el-table-column>
      <el-table-column
        prop="courseClass"
        label="课程类别"
        >
      </el-table-column>
      <el-table-column
        prop="courseScore"
        label="课程学分"
        >
      </el-table-column>
      <el-table-column
        prop="courseOnlineTestScorce"
        label="在线测试"
        >
      </el-table-column>
      <el-table-column
        prop="courseFinalTestScorce"
        label="课程结业考试"
        >
      </el-table-column>
      <el-table-column
        prop="teacher.teacherRealname"
        label="教师"
        >
      </el-table-column>
      <el-table-column label="操作" >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size='small' @click.native="coursemanageUpSelid(scope.row.courseId)""></el-button>
              <el-button type="primary" icon="el-icon-view" size='small' @click.native="coursemanageSelid(scope.row)"></el-button>
              <el-button type="primary" icon="el-icon-delete" size='small'  @click.native="coursemanageDelid(scope.row.courseId)"></el-button>
            </template>
      </el-table-column>
    </el-table>
    </div>



    <el-dialog
      title="提示"
      :visible.sync="dialogVisibleUp"
      width="30%"
      >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="课程名称">
          <el-input type="text" v-model="form.courseName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程简介" >
          <el-input type="text" v-model="form.courseInfo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程学分" >
          <el-input type="text" v-model="form.courseScore" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="dialogVisibleUp = false">取 消</el-button>
      </span>
    </el-dialog>


    <el-dialog
      title="课程信息"
      :visible.sync="dialogVisible"
      width="30%"
      >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="课程名称:">
          {{form.courseName}}
        </el-form-item>
        <el-form-item label="课程学分:">
          {{form.courseScore}}
        </el-form-item>
      </el-form>
      <h2>课程简介:</h2><span>{{form.courseInfo}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
  </el-dialog>


  <el-dialog
    title="提示"
    :visible.sync="AddCourseVisible"
    width="30%"
  >
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="课程名称" prop="courseName" required>
          <el-input type="text" v-model="ruleForm2.courseName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="课程简介" prop="courseInfo" required>
          <el-input type="text" v-model="ruleForm2.courseInfo" auto-complete="off"></el-input>
        </el-form-item>

          <el-form-item label="课程类别">
            <el-select v-model="ruleForm2.majorName" placeholder="课程类别">
              <el-option label="专升本" value="专升本"></el-option>
              <el-option label="专科" value="专科"></el-option>
              <el-option label="本科" value="本科"></el-option>
            </el-select>
          </el-form-item>

        <el-form-item label="课程学分" prop="courseScore" required>
          <el-input type="text" v-model="ruleForm2.courseScore" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormAdd('ruleForm2')">提交</el-button>
          <el-button @click="resetForm('ruleForm2')">重置</el-button>
        </el-form-item>
    </el-form>
  </el-dialog>



    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>


<style>
.el-table th{
  text-align: center;
}
</style>

<script>

import {coursemanageFy} from '@/axios/api'
import {coursemanageSel} from '@/axios/api'
import {coursemanageDel} from '@/axios/api'
import {coursemanageAdd} from '@/axios/api'
import {coursemanageUp} from '@/axios/api'
  export default {
    data() {
      return {
        currentPage:1,
        pageIndex:1,
        pageSize:10,
        total:100,
        tableData: [],
        form: {
          courseName:'',
          courseScore:'',
          courseInfo:'',
          major:''
        },
        dialogVisible:false,
        dialogVisibleUp:false,
        AddCourseVisible:false,

        ruleForm2: {
          courseName: '',
          courseInfo: '',
          courseScore:'',
          majorName:''

        },
        rules2: {
          courseName: [
            { required: true,message:"请输入课程名称", trigger: 'blur' }
          ],
          courseInfo: [
            { required: true,message:"请输入课程简介", trigger: 'blur' }
          ],
          courseScore: [
            { required: true,message:"请输入课程学分", trigger: 'blur' }
          ]
        },
        formInline: {
        condition:''
       }

      }
    },
    methods:{

      submitFormAdd(formName) {
        console.log( this.$refs[formName]);
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            this.AddCourseVisible=false;
            this.coursemanageAdd1();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

      coursemanageAdd1(){
        let params = {
          courseName:this.ruleForm2.courseName,
          courseInfo:this.ruleForm2.courseInfo,
          courseScore:this.ruleForm2.courseScore,
          majorName:this.ruleForm2.majorName
        };
        coursemanageAdd(params).then(res =>{
          console.log(res);
          if (res.status == '200') {
              this.courseList();
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
      },
      checkBy(){
          this.courseList();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert('submit!');
            this.coursemanageUp1();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      /**
       * 修改
       */
      coursemanageUp1(){
        let params = {courseName: this.form.courseName,
        courseInfo: this.form.courseInfo,
        courseScore: this.form.courseScore}
        console.log(params);
        coursemanageUp(params).then(res =>{
          if (res.status == 200) {
            this.dialogVisibleUp = false;
            this.$message({
              message: res.message,
              type: 'success'
            });
          }
        })
      },
      handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
     handleCurrentChange(val) {
       console.log(`当前页: ${val}`);
       let params = {pageIndex:val,condition:this.formInline.condition};
       coursemanageFy(params).then(res =>{
         console.log(res);
       this.tableData =  res.resData.list;

       })
     },
      courseList(){
        console.log( 'checkname :' + this.formInline.condition);
        let params={pageIndex:this.pageIndex,condition:this.formInline.condition}
        coursemanageFy(params).then(res =>{
          console.log(res);
          this.tableData=res.resData.list;
          this.pageSize=res.resData.pageSize;
          this.total=res.resData.total;
        })
      },
      coursemanageSelid(id){
        //let param = {courseId:id};
        console.log(id);
        this.form=id;
        console.log(this.form);
         this.dialogVisible=true;
        // coursemanageSel(param).then(res =>{
        //   alert(id);
        //   console.log(res);
        //   this.courseInfo=res.resData.course.courseInfo;
        //   this.form.courseName=res.resData.course.courseName;
        //   this.form.courseScore=res.resData.course.courseScore;
        //   this.dialogVisible=true;
        // })
      },
      coursemanageUpSelid(id){
        console.log(id);
        let param = {courseId:id};
        console.log(param);
        coursemanageSel(param).then(res =>{
          console.log(res);
          this.form.courseInfo=res.resData.courseInfo,
          this.form.courseName=res.resData.courseName,
          this.form.courseScore=res.resData.courseScore,
          this.dialogVisibleUp=true
        })
      },
      // coursemanageDelid(id){
      //   let param = {courseId:id};
      //   coursemanageDel(param).then(res =>{
      //     console.log(res);
      //     alert(id);
      //     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //       confirmButtonText: '确定',
      //       cancelButtonText: '取消',
      //       type: 'warning'
      //     }).then(() => {
      //       if(res.resData.status==200){
      //
      //         this.$message({
      //           type: 'success',
      //           message: '删除成功!'
      //         });
      //         this.courseList();
      //       }
      //     }).catch(() => {
      //       this.$message({
      //         type: 'info',
      //         message: '已取消删除'
      //       });
      //     });
      //   })
      // }
      coursemanageDelid(id){
        let param={courseId:id}
        coursemanageDel(param).then(res =>{
          console.log(res);
          //alert(id);
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(res.status==200){
              this.courseList();
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        })
      }
   },
    mounted(){
      this.courseList()
    }
  }
</script>
